import {Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from '@angular/core';
import {MyDateModel} from "../../models/my-date.model";

@Component({
  selector: 'app-my-date-picker',
  templateUrl: './my-date-picker.component.html',
  styleUrls: ['./my-date-picker.component.less']
})
export class MyDatePickerComponent implements OnInit, OnChanges {

  @Input()
  date = null;
  /** 显示时间格式 */
  @Input()
  dateFormat = "";

  /**
   * 时间类型，
   * start = 00:00:00
   * end = 23:59:59
   */
  @Input()
  dateTimeType: any;
  // 判断是否要关闭清除
  @Input()
  nzAllowClear = false;

  @Output()
  event: EventEmitter<MyDateModel> = new EventEmitter();

  //小时集合
  hours = [];
  //分钟集合
  minutes = [];
  //秒钟集合
  seconds = [];
  //是否显示小时选择
  showHour = false;
  //是否显示分钟选择
  showMinute = false;
  //是否显示秒钟选择
  showSecond = false;

  //默认时分秒
  hh: string = '00';
  mm: string = '00';
  ss: string = '00';

  // 最终要发送出选中的时间
  myDate: MyDateModel = new MyDateModel();

  ngOnChanges(): void {
    if(this.dateFormat == null || this.dateFormat == ''){
      this.dateFormat = "yyyy-MM-dd HH:mm:ss";
    }
    if (this.dateTimeType == 'end') {
      this.hh = '23';
      this.mm = '59';
      this.ss = '59';
    } else {
      this.hh = '00';
      this.mm = '00';
      this.ss = '00';
    }
  }


  constructor() {
    for (let i = 0; i < 24; i++) {
      this.hours.push(i);
    }
    for (let i = 0; i < 60; i++) {
      this.minutes.push(i);
    }
    for (let i = 0; i < 60; i++) {
      this.seconds.push(i);
    }
  }

  ngOnInit(): void {

  }

  // 日期时间选中时间
  onChange(date: Date): void {
    if (date != null){
      // 拿到当前日期，然后拼接00:00:00或23:59:59
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let dataTimeStr = year + "/" + month + "/" + day + " " + this.hh + ":" + this.mm + ":" + this.ss;

      this.date = new Date(dataTimeStr);
      this.myDate.type = this.dateTimeType;
      this.myDate.date = this.date;
      this.event.emit(this.myDate);
    } else {
      this.myDate.type = this.dateTimeType;
      this.myDate.date = null;
      this.event.emit(this.myDate);
    }
  }

  // 此刻
  currDateTime(datePicker) {
    this.myDate.type = this.dateTimeType;
    this.myDate.date = new Date();
    this.date = this.myDate.date;
    this.event.emit(this.myDate);
    datePicker.close();
  }

  // 确认
  confirm(datePicker) {
    let year = this.date.getFullYear();
    let month = this.date.getMonth() + 1;
    let day = this.date.getDate();
    let dataTimeStr = year + "/" + month + "/" + day + " " + this.hh + ":" + this.mm + ":" + this.ss;

    this.date = new Date(dataTimeStr);

    this.myDate.type = this.dateTimeType;
    this.myDate.date = this.date
    this.event.emit(this.myDate);
    datePicker.close();
  }

  // 选择几点钟
  selectHour(hour?) {
    this.showHour = !this.showHour;
    this.hh = this.format(hour);
  }

  // 选择几分
  selectMinute(minute?) {
    this.showMinute = !this.showMinute;
    this.mm = this.format(minute);
  }

  // 选择几秒
  selectSecond(second?) {
    this.showSecond = !this.showSecond;
    this.ss = this.format(second);
  }

  format(value) {
    if (value < 10) {
      value = "0" + value
    }
    return value;
  }
}
